GWT (Google Web Toolkit) ডেভেলপারদের জন্য বিভিন্ন ধরনের UI উইজেট সরবরাহ করে, যা ওয়েব অ্যাপ্লিকেশনকে আরও ইন্টারঅ্যাকটিভ এবং ডাইনামিক করে তোলে। এর মধ্যে Complex Widgets যেমন Tree, TabPanel, StackPanel, এবং DialogBox ব্যবহার করে আরও উন্নত এবং আকর্ষণীয় UI তৈরি করা সম্ভব। নিচে এই উইজেটগুলির প্রতিটির ব্যবহার এবং উদাহরণ দেয়া হলো।
Tree উইজেট
Tree উইজেটটি ব্যবহারকারীদের জন্য একটি আর্কিটেকচারে (structure) ভিত্তি করে বিভিন্ন স্তরের (levels) ডেটা প্রদর্শন করার জন্য ব্যবহার করা হয়। এটি মূলত একটি নেস্টেড (nested) তালিকা হিসেবে কাজ করে, যেখানে বিভিন্ন উপাদান বা আইটেম গুচ্ছ (nodes) আকারে সজ্জিত থাকে।
উদাহরণ:
package com.example.client;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.Tree;
import com.google.gwt.user.client.ui.TreeItem;
import com.google.gwt.user.client.ui.RootPanel;
public class TreeExample implements EntryPoint {
public void onModuleLoad() {
Tree tree = new Tree();
TreeItem rootItem = new TreeItem("Root Item");
tree.addItem(rootItem);
TreeItem childItem1 = new TreeItem("Child Item 1");
TreeItem childItem2 = new TreeItem("Child Item 2");
rootItem.addItem(childItem1);
rootItem.addItem(childItem2);
RootPanel.get().add(tree);
}
}
এই উদাহরণে, একটি রুট আইটেম তৈরি করা হয়েছে, যার মধ্যে দুটি চাইল্ড আইটেম রয়েছে। যখন ব্যবহারকারী রুট আইটেমটিতে ক্লিক করবে, তখন চাইল্ড আইটেমগুলো প্রদর্শিত হবে।
TabPanel উইজেট
TabPanel উইজেটটি ট্যাবড ন্যাভিগেশন সিস্টেম তৈরি করতে ব্যবহৃত হয়। এটি একাধিক ট্যাব প্রদর্শন করে, যেখানে প্রতিটি ট্যাবের অধীনে আলাদা কনটেন্ট থাকে। ব্যবহারকারী একটি ট্যাবে ক্লিক করলে সেই ট্যাবের কনটেন্ট দেখানো হয়।
উদাহরণ:
package com.example.client;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.TabPanel;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.RootPanel;
public class TabPanelExample implements EntryPoint {
public void onModuleLoad() {
TabPanel tabPanel = new TabPanel();
tabPanel.add(new Label("Content of Tab 1"), "Tab 1");
tabPanel.add(new Label("Content of Tab 2"), "Tab 2");
tabPanel.add(new Label("Content of Tab 3"), "Tab 3");
tabPanel.selectTab(0); // Default to select the first tab
RootPanel.get().add(tabPanel);
}
}
এই উদাহরণে, তিনটি ট্যাব তৈরি করা হয়েছে এবং প্রতিটি ট্যাবের সাথে আলাদা কনটেন্ট যুক্ত করা হয়েছে। প্রথম ট্যাবটি ডিফল্টভাবে নির্বাচন করা হয়েছে।
StackPanel উইজেট
StackPanel উইজেটটি এমন একটি উইজেট যেখানে একটি সময় শুধুমাত্র একটি কনটেন্ট প্যানেল দৃশ্যমান থাকে। এটি একটি স্ট্যাকের মতো কাজ করে, যেখানে একটির পর একটি কনটেন্ট প্যানেল সন্নিবেশিত থাকে এবং ব্যবহারকারী একটি নির্দিষ্ট প্যানেলে ক্লিক করলে সেই প্যানেলটি প্রদর্শিত হয়।
উদাহরণ:
package com.example.client;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.StackPanel;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.RootPanel;
public class StackPanelExample implements EntryPoint {
public void onModuleLoad() {
StackPanel stackPanel = new StackPanel();
stackPanel.add(new Label("Content for Panel 1"), "Panel 1");
stackPanel.add(new Label("Content for Panel 2"), "Panel 2");
stackPanel.add(new Label("Content for Panel 3"), "Panel 3");
RootPanel.get().add(stackPanel);
}
}
এখানে, স্ট্যাক প্যানেলে তিনটি প্যানেল যোগ করা হয়েছে। ব্যবহারকারী একটি প্যানেলে ক্লিক করলে, সে প্যানেলটি দৃশ্যমান হবে এবং অন্য প্যানেলগুলো গোপন থাকবে।
DialogBox উইজেট
DialogBox উইজেটটি একটি পপ-আপ বক্স তৈরি করতে ব্যবহৃত হয়, যা সাধারণত ব্যবহারকারীদের সতর্কতা বা কনফার্মেশন মেসেজ দেখানোর জন্য ব্যবহৃত হয়। এটি একটি মডাল উইন্ডো হিসেবে কাজ করে, যার মাধ্যমে ব্যবহারকারীকে কোনো নির্দিষ্ট অ্যাকশন নেয়ার জন্য প্রম্পট করা যায়।
উদাহরণ:
package com.example.client;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.DialogBox;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.RootPanel;
public class DialogBoxExample implements EntryPoint {
public void onModuleLoad() {
final DialogBox dialogBox = new DialogBox();
dialogBox.setText("Dialog Box Example");
dialogBox.setWidget(new Label("This is a simple dialog box"));
Button openDialogButton = new Button("Open Dialog Box");
openDialogButton.addClickHandler(event -> dialogBox.center());
RootPanel.get().add(openDialogButton);
}
}
এই উদাহরণে, একটি ডায়ালগ বক্স তৈরি করা হয়েছে যা ব্যবহারকারীর ক্লিক করার মাধ্যমে কেন্দ্রে প্রদর্শিত হবে। ডায়ালগ বক্সে একটি টেক্সট লেবেল থাকবে যা ব্যবহারকারীদের জানাবে যে এটি একটি সাধারণ ডায়ালগ বক্স।
উপসংহার
GWT-র Complex Widgets যেমন Tree, TabPanel, StackPanel, এবং DialogBox ওয়েব অ্যাপ্লিকেশন ডেভেলপমেন্টে ইন্টারঅ্যাকটিভ এবং ডাইনামিক UI তৈরিতে গুরুত্বপূর্ণ ভূমিকা রাখে। এই উইজেটগুলির মাধ্যমে ডেভেলপাররা সহজেই উন্নত ফিচার যুক্ত করতে পারেন, যা ব্যবহারকারীদের অভিজ্ঞতাকে আরও ভালো করে তোলে। GWT-র এই উইজেটগুলো Java-তে সহজে ব্যবহারযোগ্য এবং JavaScript-এ কম্পাইল হয়ে ওয়েব ব্রাউজারে কার্যকরী হয়।
Read more
